<template>
  <!-- 修改管理员信息 -->
  <div class="edit">
    <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="26%" :show-close="false" :before-close="handleClose">
      <div class="dialogContainer">
        <div class="head">
          <span>修改管理员信息</span>
        </div>
        <div class="content">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="旧密码" prop="oldPwd">
              <el-input v-model="ruleForm.oldPwd" type="password"></el-input>
            </el-form-item>

            <el-form-item label="新密码" prop="pwd">
              <el-input v-model="ruleForm.pwd" type="password"></el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="checknewpwd">
              <el-input v-model="ruleForm.checknewpwd" type="password"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="btn">
          <button @click="cancel('ruleForm')">取消</button>
          <button @click="sureEdit('ruleForm')">确定</button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (this.ruleForm.checkPass !== '') {
        this.$refs.ruleForm.validateField('checknewpwd')
      }
      callback()
    }
    // 再次输入密码校验
    var validatePass2 = (rule, value, callback) => {
      console.log('进入 判断')
      if (value !== this.ruleForm.pwd) {
        console.log(value, this.ruleForm.pwd)
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      dialogVisible: false,
      userId: '',
      ruleForm: {
        name: sessionStorage.getItem('userName'),
        oldPwd: '', // 旧密码
        pwd: '', // 新密码
        newpwd: ''// 重复输入新密码
      },
      rules: {
        name: [
          { message: '姓名不能为空', trigger: 'blur' }
        ],
        oldPwd: [
          { message: '原密码不能为空', trigger: 'blur' }
        ],
        pwd: [
          { validator: validatePass, trigger: 'change' }
        ],
        checknewpwd: [
          { validator: validatePass2, trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    // 关闭弹窗
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => { })
    },
    // 取消修改
    cancel(ruleForm) {
      // this.ruleForm = this.ruleForm2
      this.dialogVisible = false
      // this.ruleForm.newpwd = ''
      this.$refs[ruleForm].resetFields()
    },
    // 打开弹窗
    openDialog() {
      console.log('弹窗打开')
      this.dialogVisible = true
      this.ruleForm.newpwd = ''
    },
    // 确认修改
    async sureEdit() {
      console.log('确认修改')
      this.userId = Number(sessionStorage.getItem('userId'))
      console.log(Number(sessionStorage.getItem('userId')))
      const list = { id: this.userId, ...this.ruleForm }
      const res = await this.$http.post('/user/update', list)
      console.log(res)
      if (res.data.code === 200) {
        this.$message({
          showClose: true,
          type: 'success',
          message: '修改成功，请重新登录'
        })
        // 清空token
        window.sessionStorage.clear()
        // 跳转到登录页
        this.$router.push('/login')
      } else {
        this.$message({
          showClose: true,
          type: 'warning',
          message: res.data.msg
        })
      }
    }
  }
}
</script>
<style>
body,
html,
#app {
  min-width: 1100px !important;
}
</style>
<style lang="less" scoped>
.edit {
  .dialogContainer {
    button {
      cursor: pointer;
    }
    .head {
      width: 100%;
      height: 40px;
      background: #eeeeee;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .content {
      width: 70%;
      padding-top: 20px;
      height: 280px;
      margin: 0 auto;
      // overflow-y: scroll;
      .carList {
        display: flex;
        flex-wrap: wrap;
        .add {
          margin-left: 10px;
          border: 0;
          height: 40px;
          width: 50px;
          font-size: 14px;
        }
        .item {
          position: relative;
        }
        .del {
          position: absolute;
          right: 0;
          border: 0px;
        }
        input {
          width: 80px;
          height: 40px;
          border: 1px solid #dcdfe6;
          box-sizing: border-box;
          color: #606266;
          display: inline-block;
          font-size: inherit;
          border-radius: 5px;
          margin-left: 5px;
          margin-bottom: 5px;
        }
      }
      .memo {
        /deep/.el-input__inner {
          height: 82px;
          background: #ffffff;
          border: 1px solid #eeeeee;
        }
      }
    }
    .btn {
      padding: 0px 50px;
      height: 76px;
      display: flex;
      justify-content: space-evenly;
      button {
        width: 99px;
        height: 35px;
        background: #ffffff;
        border-radius: 20px;
        border: 1px solid #333333;
        &:nth-child(2) {
          background: #333333;
          color: #ffffff;
        }
      }
    }
  }
}
/deep/.el-dialog__header,
/deep/.el-dialog__body {
  padding: 0;
}
/deep/.el-dialog {
  // width: 770px;
  box-shadow: 3px 3px 11px 0px #3d3d3d;
}
</style>
